<!--
  用户管理-企业用户-账号变更
  运营审核企业手机号变更
 -->
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="待审核" name="1">
        <!-- 搜索工作栏 -->
        <el-form
          ref="leftQueryForm"
          :model="leftQueryParams"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <!-- todo 赞不支持姓名搜索 -->
          <el-form-item label="姓名" prop="nickname">
            <el-input
              v-model="leftQueryParams.nickname"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="变更号码" prop="newMobile">
            <el-input
              v-model="leftQueryParams.newMobile"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="企业名称" prop="companyName">
            <el-input
              v-model="leftQueryParams.companyName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- todo 赞不支持职位搜索 -->
          <el-form-item label="职位" prop="dept">
            <el-input
              v-model="leftQueryParams.dept"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-refresh"
              @click="resetQuery"
            >重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            >搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="leftList">
          <el-table-column label="序号" type="index" />
          <el-table-column
            label="认证材料"
            align="center"
            prop="dataUrl"
            width="180"
          >
            <template slot-scope="scope">
              <Thumbnail
                :url="scope.row.dataUrl"
                :list="[scope.row.dataUrl]"
                :size="126"
              />
            </template>
          </el-table-column>
          <el-table-column label="原姓名" align="center" prop="nickname" />
          <el-table-column label="变更姓名" align="center" prop="applyUserName" />
          <el-table-column label="原手机号" align="center" prop="username" />
          <el-table-column label="变更手机号" align="center" prop="newMobile" />
          <el-table-column label="职位" align="center" prop="department" />
          <el-table-column label="认证企业" align="center" prop="companyName" />
          <el-table-column
            label="提交时间"
            align="center"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="openCheckDialog(scope.row)"
              >审核</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="openDetail(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination
          v-show="leftTotal > 0"
          :total="leftTotal"
          :page.sync="leftQueryParams.pageNo"
          :limit.sync="leftQueryParams.pageSize"
          @pagination="leftGetList"
        />
      </el-tab-pane>
      <el-tab-pane label="已审核" name="2">
        <!-- 搜索工作栏 -->
        <el-form
          ref="rightQueryForm"
          :model="rightQueryParams"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="姓名" prop="nickname">
            <el-input
              v-model="rightQueryParams.nickname"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="变更号码" prop="newMobile">
            <el-input
              v-model="rightQueryParams.newMobile"
              placeholder="请输入变更号码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="企业名称" prop="companyName">
            <el-input
              v-model="rightQueryParams.companyName"
              placeholder="请输入企业名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="结果" prop="checkStatus">
            <el-select
              v-model="rightQueryParams.checkStatus"
              placeholder="请选择结果"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in authStatus"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="审核人" prop="statuss">
            <el-input
              v-model="rightQueryParams.accountType"
              placeholder="请输入审核人"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-refresh"
              @click="resetQuery"
            >重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            >搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="rightList">
          <el-table-column label="序号" type="index" />
          <el-table-column
            label="认证材料"
            align="center"
            prop="dataUrl"
            width="180"
          >
            <template slot-scope="scope">
              <Thumbnail
                :url="scope.row.dataUrl"
                :list="[scope.row.dataUrl]"
                :size="126"
              />
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" prop="nickname" />
          <el-table-column label="原手机号" align="center" prop="username" />
          <el-table-column label="变更手机号" align="center" prop="newMobile" />
          <el-table-column label="职位" align="center" prop="department" />
          <el-table-column label="认证企业" align="center" prop="companyName" />
          <!-- todo 暂无审核时间 -->
          <el-table-column
            label="审核时间"
            align="center"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              <span>{{ Number(scope.row.status) === 1 ? '通过': '驳回' }}</span>
            </template>
          </el-table-column>
          <!-- todo 暂无审核人 -->
          <el-table-column label="审核人" align="center" prop="updater" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="openDetail(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination
          v-show="rightTotal > 0"
          :total="rightTotal"
          :page.sync="rightQueryParams.pageNo"
          :limit.sync="rightQueryParams.pageSize"
          @pagination="rightGetList"
        />
      </el-tab-pane>
    </el-tabs>
    <!-- 审核 -->
    <el-dialog
      title="审核"
      :visible.sync="auditDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-radio v-model="checkResult" label="1">通过</el-radio>
      <el-radio v-model="checkResult" label="2">驳回</el-radio>
      <p>{{ checkResult === "1" ? "确定审核通过？" : "确定审核驳回？" }}</p>
      <el-input
        v-model="reason"
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 6 }"
        :placeholder="`${
          checkResult === '1' ? '审核通过' : '审核驳回'
        }可补充审核意见，300字以内`"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCheckDialog">取 消</el-button>
        <el-button type="primary" @click="submitCheck">确 定</el-button>
      </span>
    </el-dialog>
    <CompanyDetail ref="companyDetailRef" />
  </div>
</template>

<script>
import { checkCompanyPhoneChange, authenticationUserPhone } from '@/api/school-admin-api/hireManage/index.js'
import businessAreaData from '@/utils/businessAreaData.js'
import CompanyDetail from './components/companyDetail.vue'
export default {
  name: 'Company',
  components: {
    CompanyDetail
  },
  data() {
    return {
      reason: '',
      auditDialog: false,
      checkResult: '1',
      activeName: '1',
      // 企业行业类型数据，二级联动
      businessAreaData: businessAreaData,
      // 遮罩层
      loading: true,
      // 待审核-总条数
      leftTotal: 0,
      // 已审核-总条数
      rightTotal: 0,
      // 企业管理列表
      leftList: [],
      // 已审核企业列表
      rightList: [],
      // 弹出层标题
      title: '',
      // 待审核查询参数
      leftQueryParams: {
        pageNo: 1,
        pageSize: 10,
        nickname: null,
        comppanyName: '',
        statuss: ['0'], // 0 未审核 1 通过 2 驳回
        dept: ''
      },
      rightQueryParams: {
        pageNo: 1,
        pageSize: 10,
        nickname: null,
        comppanyName: '',
        checkStatus: '',
        statuss: ['1', '2'], // 0 未审核 1 通过 2 驳回
        dept: ''
      },
      authStatus: [
        {
          value: '1',
          label: '通过'
        },
        {
          value: '2',
          label: '驳回'
        }
      ],
      // 用户信息表
      userForm: {
        applyUserName: '',
        dept: '',
        job: '',
        tel: '',
        email: '',
        companyName: '',
        phoneNumber: ''
      },
      currentRow: null
    }
  },
  created() {
    this.leftGetList()
  },
  methods: {
    /** 打开详情页面 */
    openDetail(row) {
      console.log('row>>>', row)
      this.$refs.companyDetailRef.init({ userId: row.userId, companyId: row.companyId, dataUrl: row.dataUrl, authStatus: row.authStatus })
    },
    // 打开审核弹窗
    openCheckDialog(row) {
      this.currentRow = row
      this.auditDialog = true
    },
    // 提交审核
    submitCheck() {
      const param = {
        statuss:
        // 0 未审核 1 通过 2 驳回
          this.checkResult === '1' ? 1 : 2,
        id: Number(this.currentRow.id),
        remark: this.reason
      }
      authenticationUserPhone(param).then((res) => {
        if (res.code === 0) {
          this.$message.success('审核完成')
          this.closeCheckDialog()
          this.leftGetList()
        }
      })
    },
    // 关闭审核弹窗
    closeCheckDialog() {
      this.checkResult = '1'
      this.reason = ''
      this.auditDialog = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    handleClick() {
      if (this.activeName === '1') {
        this.leftGetList()
      } else {
        this.rightGetList()
      }
    },
    // 请求待审核列表数据
    leftGetList() {
      this.loading = true
      // 处理查询参数
      const params = JSON.parse(JSON.stringify(this.leftQueryParams))
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      // 执行查询
      checkCompanyPhoneChange(params).then((response) => {
        this.leftList = response.data.list
        this.leftTotal = response.data.total
        this.loading = false
      })
    },
    /** 请求已审核列表数据 */
    rightGetList() {
      this.loading = true
      // 处理查询参数
      const params = JSON.parse(JSON.stringify(this.rightQueryParams))
      if (params.checkStatus !== '') {
        params.statuss = [params.checkStatus]
      }
      delete params.checkStatus
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      // 执行查询
      checkCompanyPhoneChange(params).then((response) => {
        this.rightList = response.data.list
        this.rightTotal = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.activeName === '1') {
        this.leftQueryParams.pageNo = 1
        this.leftGetList()
      } else {
        this.rightQueryParams.pageNo = 1
        this.rightGetList()
      }
    },
    // 重制搜索条件
    resetQuery() {
      if (this.activeName === '1') {
        this.resetForm('leftQueryForm')
        this.handleQuery()
      } else {
        this.resetForm('rightQueryForm')
        this.handleQuery()
      }
    }
  }
}
</script>
